<template>
  <div>
    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >订单列表</van-divider
    >
    <van-grid :gutter="10" :column-num="4" clickable>
      <van-grid-item icon="star-o" text="手机代销" to="/mhfq" />
      <van-grid-item icon="star-o" text="和目" to="/mhm" />
      <van-grid-item icon="star-o" text="宽带" to="/mpppoe" />
      <van-grid-item icon="star-o" text="手机金币" to="/msellbuys" />
      <van-grid-item icon="star-o" text="以老带新" to="/moldWN" />
    </van-grid>
    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >业务查询</van-divider
    >
    <van-grid :gutter="10" :column-num="4" clickable>
      <van-grid-item icon="search" text="宽带查询" to="mspppoe" />
    </van-grid>
    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >礼品管理</van-divider
    >
    <van-grid :gutter="10" :column-num="4" clickable>
      <van-grid-item
        icon="point-gift"
        text="礼品仓库"
        @click="giftshow = true"
      />
    </van-grid>
    <!-- 动画 -->
    <div class="acc" v-show="imgshow">
      <h1>还没有哦</h1>
      <img src="../../assets/xixixi.png" />
    </div>

    <!-- 礼品导航 -->
    <van-overlay :show="giftshow" @click="giftshow = false">
      <div class="wrapper">
        <div class="block">
          <van-cell title="入库列表" is-link to="mHQGoods" />
          <van-cell title="礼品统计" is-link to="mgoods" />
          <van-cell title="申请列表" is-link to="mmyapplie" />
          <van-cell title="使用详情" is-link to="mgoodapplie" />
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgshow: false,
      giftshow: false,
    };
  },
  methods: {
    aa() {
      this.imgshow = true;
      setTimeout(() => {
        this.imgshow = false;
      }, 1000);
    },
  },
};
</script>

<style lang="less" scope>
.acc {
  position: absolute;
  left: 80px;
  top: 170px;
  img {
    width: 200px;
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 200px;
  height: 100px;
  background-color: #fff;
}
</style>